<template>
  <h1>字典组件</h1>
  <div>JBXXTSRQ / AZBJCSDM / EMP_ZYLB / MSTWCZLZZYYDM / RSZZFSDM / YWJXDM</div>
  <f-input-search
    v-model:value="modelCode"
    enter-button
    @search="onSearch"
    class="w200"
    placeholder="编码" />
  <f-input v-model:value="modelOper" class="w100" placeholder="小编码" />
  <f-select v-model:value="type">
    <f-select-option value="radio" label="radio" />
    <f-select-option value="radio-button" label="radio-button" />
    <f-select-option value="select" label="select" />
    <f-select-option value="checkbox" label="checkbox" />
    <f-select-option value="cascader" label="cascader" />
  </f-select>
  <f-select v-model:value="size">
    <f-select-option value="large" label="large" />
    <f-select-option value="default" label="default" />
    <f-select-option value="small" label="small" />
  </f-select>
  <f-dictionary
    v-model:value="dataValue"
    isDefault
    showAllOption
    :code="code"
    :oper="modelOper"
    :type="type"
    :size="size"
    :changeOnSelect="false"
    @change="onChange"
    @blur="onBlur"
    @focus="onFocus"
    class="s-w100" />
  {{ dataValue }}
</template>

<script setup>
import { onBeforeMount, ref } from 'vue';

const dataValue = ref();
const modelCode = ref('YWJXDM');
const modelOper = ref('');
const type = ref('cascader');
const size = ref('default');

// JBXXTSRQ AZBJCSDM EMP_ZYLB MSTWCZLZZYYDM RSZZFSDM
const code = ref('GMDM');

const onSearch = () => {
  code.value = modelCode.value;
  // dataValue.value = null
};

const onChange = (value, option) => {
  console.log('onChange', value, option);
};
const onBlur = (e) => {
  console.log('onBlur', e);
};
const onFocus = (e) => {
  console.log('onFocus', e);
};

onBeforeMount(() => {
  console.log('字典组件');
});
</script>

<style lang="scss"></style>
